<template>
  <div id="home">
    <header>
      <div class="topbox">
        <p class="top_p1">
          <i class="logo"></i>
          献给老肥钊
        </p>
        <p class="top_p2">下载APP</p>
      </div>
      <van-tabs
        :active="tab_act"
        @change="tab_change"
        :class="path ? 'change_color' : ''"
      >
        <van-tab title="推荐音乐" name="Recommend"></van-tab>
        <van-tab title="热歌榜" name="Rank"></van-tab>
        <van-tab title="搜索" name="Search"></van-tab>
      </van-tabs>
    </header>

    <!-- 用于渲染二级路由内容 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tab_act: 0,
      path: this.$route.name,
    };
  },
  components: {},
  methods: {
    tab_change(name) {
      //   console.log(name, title);
      this.$router.push({
        name: name,
      });
    },
  },
  watch: {
    $route: {
      handler(val) {
        let path = ["Recommend", "Rank", "Search"];
        if (path.includes(val.name)) {
          // 修复导航闪动
          this.tab_act = val.name;
        }
      },
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
#home {
  padding-top: 128px;
}
header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 99;
  .topbox {
    width: 100%;
    height: 84px;
    background: repeating-linear-gradient(30deg, skyblue, #ccc 20%, red 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    .top_p1 {
      color: white;
      font-size: 20px;
      display: flex;
      align-items: center;
      position: absolute;
      left: 15px;
      i {
        display: inline-block;
        width: 22px;
        height: 22px;
        background: url(../assets/logo.png) no-repeat center white;
        border-radius: 50%;
        vertical-align: inherit;
        margin-right: 10px;
      }
    }
    .top_p2 {
      width: 80px;
      background-color: white;
      padding: 5px;
      border-radius: 15px;
      color: #d43c33;
      position: absolute;
      right: 10px;
    }
  }
}
</style>
